<template>
  <div class="about">
    <comp-input v-model:text="text"></comp-input>
    {{text}}
    <h1 @click="changeComp" v-highlight="{ color: '#f00' }">组件切换</h1>
    <ul class="nav-list">
      <li class="nav-item"></li>
    </ul>
    <component :is="componentId"></component>
    <Suspense>
      <template #default>
        <async-component />
      </template>
      <template #fallback> Loading ... </template>
    </Suspense>
    <comp-card :father="father"></comp-card>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import { app } from '../main.js'
import compCard from '@/components/card'
import compInput from '@/components/input'
const asyncComponent = defineAsyncComponent({
  loader: () => import('@/components/asyncComponent'),
  delay: 200,
  timeout: 3000
})

export default {
  components: {
    compCard,
    asyncComponent,
    compInput
  },
  setup(props) {},
  data() {
    return {
      componentId: 'compCard',
      father: 'father',
      text: 'input'
    }
  },
  methods: {
    changeComp() {
      this.componentId =
        this.componentId === 'compCard' ? 'asyncComponent' : 'compCard'
    }
  }
}

console.log(app)
</script>

<style lang="scss" scoped>
</style>